<template>
  <div>
    <a-layout>
      <a-layout-sider style="min-width:300px;">
        <h4 style="margin:10px">视频列表</h4>
        <a-input class="search-tree" v-model="searchKey" placeholder="请输入搜索关键词">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <div>
          <!-- <a-spin class="tree-loading" :loading="loading" tip="加载中..."> -->
          <!-- TODO: 滚动条边距和宽度需要调整 -->
          <div style="max-height:76vh;overflow: auto;">
            <a-tree ref="aTreeRef" :data="treeData" :default-expanded-keys="expandedKeys" :show-line="true" defaultExpandAll
              @select="nodeClick">
              <template #title="node">
                <span class="tree-title">{{ node.title }}</span>
              </template>
              <template #icon="node">
                <SvgIcon name="folder-close" :size="16" v-if="!node.isLeaf && !node.expanded"></SvgIcon>
                <SvgIcon name="folder-open" :size="16" v-if="!node.isLeaf && node.expanded"></SvgIcon>
                <SvgIcon name="txt" :size="16" v-if="node.isLeaf"></SvgIcon>
              </template>
            </a-tree>
          </div>
          <!-- </a-spin> -->
        </div>

      </a-layout-sider>
      <a-layout-content>
        <div class="cell">
          <a-row :gutter="8" style="width: 90%; height: 90%; text-align: center">
            <a-col :span="20" :xs="24">
              <div class="cell-tool">
                <div class="bk-button-group" style=" margin-top: 10px; margin-bottom: 10px;text-align: center">
                  <a-radio-group v-model="position" type="button" @change="clicktrue">
                    <a-radio value="0">1</a-radio>
                    <a-radio value="1">4</a-radio>
                    <a-radio value="2">9</a-radio>
                    <a-radio value="3">16</a-radio>
                  </a-radio-group>
                  <a-button @click="toggleFullscreen" class="fullscreen-toggle">
                    {{ isFullscreen ? "退出全屏" : "进入全屏" }}
                  </a-button>
                </div>
              </div>
              <!-- 1 -->
              <div class="player" v-if="arr[0]" ref="fullscreenElement">
                <div class="cell-player-1">
                  <LivePlayer ref="player3" :video-url="datass[0]" live play autoplay />
                </div>
              </div>
              <!-- 4 -->
              <div class="player1" v-if="arr[1]" ref="fullscreenElement">
                <div class="cell-player-4">
                  <LivePlayer ref="player3" :video-url="datass[0]" live play autoplay />
                </div>
                <div class="cell-player-4">
                  <LivePlayer ref="player3" :video-url="datass[1]" live play autoplay />
                </div>
                <div class="cell-player-4">
                  <LivePlayer ref="player3" :video-url="datass[2]" live play autoplay />
                </div>
                <div class="cell-player-4">
                  <LivePlayer ref="player3" :video-url="datass[3]" live play autoplay />
                </div>
              </div>
              <!-- 9 -->
              <div class="player2" v-if="arr[2]" ref="fullscreenElement">
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[0]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[1]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[2]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[3]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[4]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[5]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[6]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[7]" live play />
                </div>
                <div class="cell-player-9">
                  <LivePlayer ref="player3" :video-url="datass[8]" live play />
                </div>
              </div>
              <!-- 16 -->
              <div class="player4" v-if="arr[3]" ref="fullscreenElement">
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[0]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[1]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[2]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[3]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[4]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[5]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[6]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[7]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[8]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[9]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[10]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[11]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[12]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[13]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[14]" live play />
                </div>
                <div class="cell-player-16">
                  <LivePlayer ref="player3" :video-url="datass[15]" live play />
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import LivePlayer from "@liveqing/liveplayer-v3";
// import OrgTree from './orgTree.vue';
import { getvideoPlayUrl, getchannelstream } from "@/api/modules/video/index";
// const videoUrlL = ref('')
const position = ref("1");
const expandedKeys = ref(['1']); // 默认展开 Node 1 和 Child Node 1


const searchKey = ref("");
const isFullscreen = ref(false);
const fullscreenElement = ref<HTMLElement | null>(null);
let arr = ref([false, true, false, false]) as any;
const datass = reactive([]) as any;
async function nodeClick(selectedKeys: any, info: any) {

  console.log('选中的节点 key:', selectedKeys);

  // info 是选中节点的详细信息
  console.log('选中的节点信息:', info);
  const res = await getchannelstream({ ip: info.node.ip, Channel: info.node.channel }) as any
  // // 播放地址
  console.log(res, "UrL11111");
  if (res.status == 2) {
    datass.push(res.data.urlStr)
  }
  // video-urlL.value = UrL.data.result.data.video-urls[0]

  // console.log(datass,"sssss");

};

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    if (fullscreenElement.value?.requestFullscreen) {
      fullscreenElement.value.requestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
};

const updateFullscreenStatus = () => {
  isFullscreen.value = !!document.fullscreenElement;
};

const treeData = ref([])

async function inittree() {
  let res = await getvideoPlayUrl();
  if (res.status == 2) {
    treeData.value = buildTree(res.data)
    console.log(treeData);

  }
}
// 构建树结构
function buildTree(data) {
  const map = new Map();
  const root = [];

  // 初始化所有节点
  data.forEach(item => {
    item.children = [];
    map.set(item.id, item);
  });

  // 通过 pid 关系来构建树
  data.forEach(item => {
    if (item.pid === 0) {
      root.push(item);
    } else {
      const parent = map.get(item.pid);
      if (parent) {
        parent.children.push(item);
      }
    }
  });

  return root;
}

onMounted(() => {
  inittree();
  document.addEventListener("fullscreenchange", updateFullscreenStatus);
});

onUnmounted(() => {
  document.removeEventListener("fullscreenchange", updateFullscreenStatus);
});

function clicktrue(i: any) {
  console.log(i, "arr");
  for (let j = 0; j < arr.value.length; j++) {
    arr.value[j] = false;
  }
  arr.value[i] = true;

  // player2.value != player2.value;
  // player4.value != player4.value
}
// function test1(e: { target: { className: string; }; }) {
//   // if(e)
//   if (e.target.className.search("vben-tree__title") != -1) {
//     console.log(1111)
//   }
//   console.log("e", e, e.target.className)
// }
</script>

<style lang="scss" scoped>
.search-tree {
  height: 32px;
  margin-bottom: $margin;
}

.tree-box {
  height: (100%);

  .tree-loading {
    width: 100%;
    height: 100%;
  }

}

.player {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 10%;
}

.player1 {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 10%;
}

.player2 {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 10%;
}

.player4 {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 10%;
}

.cell-player-4 {
  box-sizing: border-box;
  width: 50%;
  height: 50% !important;
  color: white;
  text-align: center;
  background-color: black;
  border: 1px solid white;
}

.cell-player-1 {
  box-sizing: border-box;
  width: 100%;
  color: white;
  text-align: center;
  background-color: black;
  border: 1px solid white;
}

.cell-player-9 {
  box-sizing: border-box;
  width: 33.33%;
  height: 33.33% !important;
  color: white;
  text-align: center;
  background-color: black;
  border: 1px solid white;
}

.cell-player-16 {
  box-sizing: border-box;
  width: 25%;
  height: 25% !important;
  color: white;
  text-align: center;
  background-color: black;
  border: 1px solid white;
}

.cell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>